<!--
 * @Author: yuqy
 * @Date: 2023-04-10 19:26:39
 * @LastEditors: yuqy
 * @LastEditTime: 2023-10-24 16:33:45
 * @Descripttion: -
-->

<template>
  <div class="wrap">
    <!-- #FE6400 顶部圆球区域-->
    <div class="top_round_wrap">
      <img src="@/assets/img/halfround.png" alt>
    </div>
    <div class="header_wrap need_hide_wrap">
      <div class="room_title js-drag" style="-webkit-app-region: drag; width: 100%;">
        <p>
          <span>双师讲堂</span>
          <van-icon name="filter-o" size='18'/>
        </p>
        <p>
          <span>课堂编码：{{ code }}</span>
          <span>听讲：{{ sreenUserList.length }}</span>
        </p>
      </div>
    </div>

    <div class="content_wrap need_hide_wrap">
      <LocalVideoWrap/>
      <!-- 房间内的听众列表 -->
      <user-list
        :hasSecondScreen="isHasSecondScreen"
        @isSet='isSet'
        />
    </div>
    <!-- 底部菜单栏 -->
    <div class="footer_btn_wrap van-hairline--top">
      <btn-list 
        :code="code"
        @openAudience='openAudience'
        @openWhiteBloard='openWhiteBoard'
        @exit="exit" 
      />
    </div>
  </div>
</template>
<script >
import { Message } from "view-ui-plus";
import LocalVideoWrap from "./modules/localVideo.vue";
import UserList from "./modules/userList.vue";
import BtnList from "./modules/btnList.vue";
import mixin from "@/mixins/mixinsSpeak.js";
import agora from "@/mixins/agora.js";
import websocket from "@/mixins/websocket.js";
import { openWhiteBoard } from "@/libs/homeredirect";
export default {
  name: "homeSpeaker",
  setup() {},
  mixins: [mixin, agora, websocket],
  components: {
    LocalVideoWrap,
    UserList,
    BtnList
  },
  data() {
    return {
      list: [{}, {}, {}, {}]
    };
  },
  async created() {},
  methods: {
    /**
     * @name: 下课成功后的操作
     * @msg:
     * @return {*}
     */
    downClassSuccess(res) {
      // 通知听讲 退出课堂
      this.sendCommonMsg("886");
      Message.success("已下课!");
      // 直接退出本页面，回到主页
      if (this.APP_IS_Web) {
        return this.$router.push("./home");
      }
      setTimeout(() => {
        window.electronAPI.resize("close", {});
      }, 1000);
    },
    /**
     * @name: 打开白板页面
     * @msg: 
     * @return {*}
     */    
    openWhiteBoard () {
      if (!this.APP_IS_Web) {
        this.exit(1);
      }
      openWhiteBoard(this.code);
    }
  }
};
// const store = useStore()
// 直接引入store数据
// const { nowSystem } = getStoreMap(['nowSystem'])
// 批量取roomAgora动态值
// 房间信息
// const { roomInfo } = getStoreModulesMap('roomAgora', ['roomInfo'])

// onBeforeMount(async () => {
//   console.log(nowSystem.value);
// })
// const appid = computed(() => store.state.nowSystem)

// const active = ref(false)

// const onClickOutside = () => {
//     alert('000')
// }
</script>
<style scoped lang="less">
@import url("./less/index.less");
#homeSpeaker_local_s_video_wrap {
  width: 500px;
  height: 500px;
  border: 5px solid red;
}
</style>
